<template>
  <div class="yd-form login">
		<figure class="logo">
			<img src="@/assets/logo.png">
      <h1>一点高人</h1>
		</figure>
		<group gutter="0">
			<x-input v-model="form.user" placeholder="请输入手机号" required ref="user" keyboard="number" @on-change="inputing" :disabled="isBack"></x-input>
      <x-input key="code" v-if="loginType" v-model="form.pwd" placeholder="请输入验证码" required ref="pwd" @on-change="inputing">
        <x-button slot="right" type="primary" plain mini @click.native="sendCode" :disabled="start" class="vcode">
					<template v-if="start">
						<countdown v-model="time" :start="start" @on-finish="finishCode"></countdown>
						<span>s重新发送</span>
					</template>
					<span v-else>发送验证码</span>
				</x-button>
      </x-input>
      <x-input key="pwd" v-else :type="inputType ? 'password' : 'text'" v-model="form.pwd" placeholder="请输入密码" required ref="pwd" @on-change="inputing" :disabled="isBack" class="pwdeye">
				<x-button slot="right" type="primary" plain mini @click.native="inputType = !inputType" :class="inputType + ''">
					<span>eye</span>
				</x-button>
			</x-input>
		</group>

		<p class="switch">
			<span class="f24" @click="loginType = !loginType">{{loginType ? '密码' : '手机'}}登录</span>
		</p>

		<x-button type="primary" :disabled="!valid" @click.native="login" class="btn-login">登录</x-button>

		<p class="links">
			<router-link class="f24" tag="span" to="/register">注册新用户</router-link>
			<router-link class="f24" tag="span" to="/forget">忘记密码</router-link>
		</p>

		<!-- <divider class="shortcut">
			<div class="item"><img src="@/assets/login/wxpay@2x.png"></div>
		</divider> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      isBack: false,
      form: {
        user: "",
        pwd: ""
      },
      loginType: false,
      inputType: true,
      time: 60,
      start: false,
      valid: false,
    };
  },
  computed: {
    redirect() {
      return this.$route.query.redirect;
    }
  },
  methods: {
    inputing() {
      this.valid = this.$refs.user.valid && this.$refs.pwd.valid;
    },
    sendCode() {
      const user = this.$refs.user;
      if (!user.valid) {
        this.$vux.toast.text(user.placeholder);
        return setTimeout(() => {
          user.focus();
        }, 2000);
      }

      this.$http.fetchGet("sendVerifyCode", {
				phone: this.form.user
			}).then(({ data }) => {
				console.log("发送验证码", data);
				data && (this.start = true);
			});
    },
    finishCode() {
      this.start = false;
      this.time = 60;
    },
    login() {
      this.$http.fetchGet("login", {
				loginName: this.form.user,
        loginPwd: this.form.pwd,
        loginType: this.loginType ? '2' : '1',
			}).then(({headers, data}) => {
				console.log("登录", data);
        this.isBack = false;
				if (data.data) {
          this.$store.commit("login", {
            token: headers.authorization,
            userId: data.data.userId,
            masterId: data.data.masterId,
            isMaster: data.data.masterId ? true : false,
            userPhone: data.data.userPhone
          });
          let storage = window.sessionStorage;
          if(data.data.masterId) storage.setItem('masterId', data.data.masterId)
          else storage.removeItem('masterId')
          storage.setItem('userId', data.data.userId)
          storage.setItem('userName', data.data.userName)
          storage.setItem('userPhone', data.data.userPhone)
          storage.setItem('token', data.data.token)
          storage.setItem('userPhoto', data.data.userPhoto)
          this.$vux.toast.text("登录成功...");
          setTimeout(() => {
            sessionStorage.removeItem('phone');
            sessionStorage.removeItem('pwd');
            if(this.redirect) {
              this.$router.replace({
                path: this.redirect
              });
            } else {
              this.$router.back();
            }
          }, 2000);
				}
			});
    }
  },
  created() {
    if(sessionStorage.phone && sessionStorage.pwd) {
      this.isBack = true;
      this.form.user = sessionStorage.phone;
      this.form.pwd = sessionStorage.pwd;
      this.login();
    }
  }
};
</script>

<style scoped lang="less">
.btn-login {
  margin-top: 0;
}
</style>
